/*1*/
.screen-1__heading_animate_init{
	opacity: 0;
    transform: translate(0, 100%);
}
.screen-1__heading_animate_done{
    opacity: 1;
    transform: none;
    transition:all 1s;
}

.screen-1__phone_animate_init{
	opacity: 0;
    transform: translate(0, -100%);
}
.screen-1__phone_animate_done{
    opacity: 1;
    transform: none;
    transition:all 1s;
}

.screen-1__shadow_animate_init{
	opacity: 0;
    transform: translate(0, 100%);
}
.screen-1__shadow_animate_done{
	opacity: 1;
    transform: none;
    transition:all 1s;
}
/*2*/
.screen-2__heading_animate_init{
	opacity: 0;
    transform: translate(0, -100%);
}
.screen-2__heading_animate_done{
    opacity: 1;
    transform: none;
    transition:all 1s;
}
.screen-2__subheading_animate_init{
	opacity: 0;
    transform: translate(0, 100%);
}
.screen-2__subheading_animate_done{
    opacity: 1;
    transform: none;
    transition:all 1s;
}
.screen-2__phone_animate_init{
	opacity: 0;
    transform: translate(0, 100%);
}
.screen-2__phone_animate_done{
    opacity: 1;
    transform: none;
    transition:all 1s;
}
.screen-2__point_1{
	opacity: 0;
	transform: translate(-100%,0);
}
.screen-2__point_1_animate_done{
    opacity: 1;
    transform: none;
    transition:  all .5s 1s;
}
.screen-2__point_2{
	opacity: 0;
	transform: translate(100%,0);
}
.screen-2__point_2_animate_done{
    opacity: 1;
    transform: none;
    transition:  all .5s 1s;
}
.screen-2__point_3{
	opacity: 0;
	transform: translate(100%,0);
}
.screen-2__point_3_animate_done{
    opacity: 1;
    transform: none;
    transition:  all .5s 1s;
}
/*3*/
.screen-3__heading_animate_init{
    opacity: 0;
	transform: translate(0,-100%);
}
.screen-3__subheading_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-3__phone_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen-3__features_animate_init{
	opacity: 0;
	transform: scale(.5);
}
.screen-3__phone_animate_done,
.screen-3__subheading_animate_done,
.screen-3__heading_animate_done{
    opacity: 1;
	transform: none;
	transition: all 1s;
}
.screen-3__features_animate_done{
	opacity: 1;
	transform: scale(1);
	transition: all 1s;
}
.screen-3__features__item:hover{
	transform: scale(1.1);
	border:1px solid #fff;
	transition: all 1s;
	cursor: pointer;
}

/*4*/
.screen-4__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-4__heading_animate_done{
    opacity: 1;
    transform: none;
    transition: all 1s; 
}
.screen-4__subheading_animate_init{
	opacity: 0;
    transform: translate(0,100%);
}
.screen-4__subheading_animate_done{
	opacity: 1;
    transform: none;
    transition: all 1s; 
}
.screen4__type__item_1_animate_init,
.screen4__type__item_2_animate_init,
.screen4__type__item_3_animate_init,
.screen4__type__item_4_animate_init{
	opacity: 0;
	transform: translate(0,100%);
}
.screen4__type__item_1_animate_done{
	opacity: 1;
	transform: none;
	transition: all 1s;
}
.screen4__type__item_2_animate_done{
	opacity: 1;
	transform: none;
	transition: all 1.5s;
}
.screen4__type__item_3_animate_done{
	opacity: 1;
	transform: none;
	transition: all 2.5s;
}
.screen4__type__item_4_animate_done{
	opacity: 1;
	transform: none;
	transition: all 3s;
}
/*5*/
.screen-5__heading_animate_init{
    opacity: 0;
    transform: translate(0,-100%);
}
.screen-5__subheading_animate_init{
	opacity: 0;
    transform: translate(0,100%);
}
.screen-5__bg_animate_init{
	opacity: 0;
	transform: scale(0.5);
}
.screen-5__heading_animate_done,
.screen-5__subheading_animate_done,
.screen-5__bg_animate_done{
	transition: all 1s;
	transform: none;
}




/*~~~~~~~~~~~~触点动画~~~~~~~~~~~~~~~~*/
.screen-2__point_1:after{
   content: '';
   display: block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background:rgba(205,56,56,.4);
   position: absolute;
   right: 76px;
   top: 1px;
   animation: shanshuo 2s infinite;
   -webkit-animation:shanshuo 2s infinite;
   -moz-animation:shanshuo shanshuo 2s infinite;
}
.screen-2__point_2:after{
   content: '';
   display: block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background:rgba(205,56,56,.4);
   position: absolute;
   left: 97px;
   top: 1px;
   animation: shanshuo 2s infinite;
   -webkit-animation:shanshuo 2s infinite;
   -moz-animation:shanshuo shanshuo 2s infinite;
}
.screen-2__point_3:after{
   content: '';
   display: block;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background:rgba(205,56,56,.4);
   position: absolute;
   left: 97px;
   top: 1px;
   animation: shanshuo 2s infinite;
   -webkit-animation:shanshuo 2s infinite;
   -moz-animation:shanshuo shanshuo 2s infinite;
}
@keyframes shanshuo {
	0%,100%{
       transform: scale(0);
	}
	50%{
		transform: scale(1);
	}
}
/*特别加入摇动动画*/
.screen-3__features__item__number{
	animation: rock 2s infinite ease-in-out .8s
	-moz-animation: rock 2s infinite ease-in-out .8s;
	-webkit-animation: rock 2s infinite ease-in-out .8s;
}
@keyframes rock{
	0%{
		transform: rotate(0deg);
	}
	10%{
		transform: rotate(3deg);
	}
	20%{
		transform: rotate(-3deg);
	}
	30%{
		transform: rotate(2deg);
	}
	40%{
		transform: rotate(-2deg);
	}
	50%{
		transform: rotate(1deg);
	}
	60%{
		transform: rotate(-1deg);
	}
	70%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(0deg);
	}
}



/*导航条效果*/
.header__status_back{
	background: rgba(0,0,0,.5);
	position: fixed;
	top: 0;
	z-index: 199;
	transition: all 1s;
}
.header__status_back .header__logo,
.header__status_back .header__nav {
  color: #ffffff;
}
.red{
	color: red;
}

/*侧边栏*/
.outline{
    transition: all 1s;
    transform: translate(100%,0);
}
.outline__status_in{
	transform: none;
}